<template>
    <div class="app-container-echart">
        <div class="chart" style="height:300px;width:100%;" />
    </div>
</template>
  
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') 
import resize from '@/views/dashboard/components/mixins/resize'
  
  
  export default {
    mixins: [resize],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.initChart();
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      getGradientColor(color11, color22){
        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {offset: 0, color: color11},
          {offset: 1, color: color22}]) ;
      },
      initChart() {
          this.chart = echarts.init(this.$el, 'macarons')
          this.setOptions(['A部门', 'B部门', 'C部门', 'D部门', 'E部门', 'F部门'],
                [123, 91, 87, 81, 69, 67])
      },
    setOptions(times, datas) {
        this.chart.setOption({
            title: {
                text: 'TOP5排行榜',
                left:'center'
            },
            grid: {
                top: '5%',
                left: '8%',
                right: '0%',
                bottom: '0%'
            },
            tooltip: {
                show: true,
                backgroundColor: '#fff',
                textStyle: {
                    fontSize: 12,
                    color: '#152934',
                    lineHeight: 50
                },
                // formatter: function (params) {
                //     return params.name + '：' + params.data + '%'
                // }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                data: times,
                inverse: true,
                axisLine: {
                    show: false,
                    interval: 0
                },
                axisTick: {
                    show: false
                }
            },
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                data: datas,
                barWidth: 25,
                barGap: '-100%',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        // formatter: function (value) {
                        //     return value.value + '%'
                        // }
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black',
                                fontSize: 16
                            }
                        },
                        color: function (params) {
                            var myColor = ['#43CFB4', '#2DB4F8', '#2D78D5', '#7C6BD3', '#E4A824', '#F27B39'];
                            var num = myColor.length
                            return myColor[params.dataIndex % num]
                        }
                    }
                }
            }]
        })
      }
    }
  }
  </script>
  